<template>
  <div class="myHome">
    <div class="header-wrap">
    <span class="header-wrap-left"  @click="goback">
      <i class="iconback iconfont icon-fanhui"></i>
    </span>
    <span class="header-wrap-text">我的物业</span>
    <span class="header-wrap-right"></span>
    </div>
    <div class="myHome-tittle" v-if="housesLength">您一共有{{housesLength}}处物业</div>
    <div class="myHome-box">
      <ul class="myHome-list">
        <li v-for="(list,index) in listData" :key="index">
          <div class="myHome-img" @click="toHouseMembers(list.id)">
            <img v-lazy="host+list.residential.image" :src="host+list.residential.image" alt="">
          </div>
          <div class="myHome-text">
            <div class="myHome-name">{{list.residential.name}}</div>
            <!-- <div class="myHome-name" style="font-size:.26rem;">{{list.building}}-{{list.period}}</div>
            <div class="myHome-name" style="font-size:.26rem;">{{list.unit}}-{{list.account_number}}</div> -->
          </div>
        </li>
      </ul>
    <div v-if="housesLength==0" @click="toaddhome" class="submit" >添加物业</div>
    </div>
    <Tips v-if="housesLength==0"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import Tips from '../../components/tips'
export default {
  data(){
    return{
      host: api.host,
      listData:[],
      housesLength:null,
      sign: '',
    }
  },
  created(){
    this.personal()
  },
  methods:{
    // // 显示加载动画
    // showAnimation(){
    //   this.$store.commit('showLoading')
    // },
    // // 隐藏加载动画
    // hideAnimation(){
    //   setTimeout(() => {
    //     this.$store.commit('hideLoading')
    //   }, 500);
    // },
    goback(){
      this.sign = this.$route.query.sign
      if(this.sign==1){
        this.$router.push('/mine')
        return
      }
      if(this.sign==undefined){
        this.$router.push('/')
        // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&r=member'
        return
      }
    },
    toaddhome(){
      this.$router.push('/addhome')
    },
    toHouseMembers(id){
      this.$router.push({
        path: '/houseMembers',
        query: {
          id
        }
      })
    },
    personal(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.personal, {
      })
      .then((response) => {
        if(response.data.code===1){
          this.listData = response.data.data.houses
          this.housesLength = response.data.data.houses.length
          this.$toast.clear();
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
  },
  components: {
    Tips
  }
}
</script>
<style scoped>
.myHome{
  min-height:calc(100vh - 1rem);
}
.myHome-tittle{
  padding: 1.2rem 7% .25rem 7%;
  color: #000;
  font-weight: bold;
  font-size: .64rem;
  text-align: left;
  height: .88rem;
  line-height: .88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.myHome-box{
  height: auto;
}
.myHome-list{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.myHome-list li{
  position: relative;
  flex: 1;
  height: 4rem;
  min-width: 40%;
  max-width: 40%;
  margin-bottom: .5rem;
}
.myHome-list li:nth-child(odd){
  margin-left:7%;
}
.myHome-list li:nth-child(even){
  margin-left:6%;
}
.myHome-list li .myHome-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.myHome-list li .myHome-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem;
}
.myHome-text{
  font-size: .36rem;
  position: absolute;
  left: 12%;
  top: 8%;
}
.myHome-name{
  width: 2rem;
  height: .4rem;
  line-height: .4rem;
  font-size: .32rem;
  color: #ee5a8a;;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.myHome-city{
  height: auto;
  font-size: .24rem;
  color: #57c5c6;
  text-indent: .15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.submit{
  width: 6.5rem;
  height: 1rem;
  line-height: 1rem;
  position: absolute;
  left: calc(50% - 3.25rem);
  bottom: .25rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}
</style>
